<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-11-24 20:50:47
 * @LastEditors: 杨超
 * @Description:
-->
<template>
  <div
    :style="item.style || {}"
    :class="`form-unqiue-${item.key}`"
    class="form-item-box"
  >
    <el-table
      :data="value"
      border
      style="width: 100%"
      :header-cell-style="headerStyle"
    >
      <el-table-column
        v-for="(tableItem, index) in item.headerList"
        :key="index"
        :prop="tableItem.prop"
        :label="tableItem.label"
        align="center"
      />
    </el-table>
  </div>
</template>

<script>

export default {
    name: 'TableReadonly',
    props: {
        item: {
            type: Object,
            default: () => {
                return {}
            }
        },
        value: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {}
    },
    methods: {
    // 表头样式
        headerStyle() {
            const obj = {}
            obj.background = '#F7F8FB'
            obj.fontFamily = 'PingFangSC-Semibold'
            obj.fontSize = '14px'
            obj.color = '#12182A'
            obj.fontWeight = '600'
            return obj
        }
    }
}
</script>

<style scoped lang="scss">
.form-item-box {
  margin-bottom: 20px;
}
</style>
